<template>
    <div>
        <CollegeDetailsHeader></CollegeDetailsHeader>
        <div id="content">
            <el-divider ><i class="el-icon-school"></i> {{college.collegeName}}</el-divider>
            <div class="college">
                <div class="collegeDetails">
                    <el-divider content-position="left"><i class="el-icon-reading"></i> 大学简介</el-divider>
                    <div class="collegeInfo">
                        <div class="collegeImg" v-if="pictrues != null">
                            <template>
                                <el-carousel :interval="3000" type="card" height="300px" autoplay loop>
                                    <el-carousel-item v-for="pictrue in pictrues" :key="pictrue">
                                        <img :src="pictrue" style="width:800px;height: 320px">
                                    </el-carousel-item>
                                </el-carousel>
                            </template>
                        </div>
                        <br/>
                        <el-divider content-position="left" ><i class="el-icon-collection-tag"></i></el-divider>
                        <div class="collegeBasic">
                            <div class="info">
                                <el-row>
                                    <el-col :span="15">
                                        <div style="margin: 46px 0;">
                                            <span>所在省份: {{college.province}}</span><span>所在地区: {{college.region}}</span><br/><br/>
                                            <span>办学类型: {{college.startType}}</span><span>学校类型: {{college.collegeType}}</span><br/><br/>
                                            <!--                                        <span>学校标签: </span><br/>-->
                                            <span>{{college.collegeTag}}</span><br/><br/>

                                            <div v-show="college.officialPhone !=null">
                                                <span >学校官方电话:   {{college.officialPhone}}</span><br/><br/>
                                            </div>
                                            <div v-show="college.officialEmail !=null">
                                                <span >学校官方邮箱:   {{college.officialEmail}}</span><br/><br/>
                                            </div>
                                            <!--                                        <span>学校官网地址:</span><br/>-->
                                            <a :href="college.officialUrl" target="_blank">{{college.officialUrl}}</a><br/><br/><br/>
                                        </div>
                                    </el-col>
                                    <i class="el-icon-moon" style="color: #cfecc1"></i><br/>
                                    <el-divider direction="vertical"></el-divider>
                                    <el-col :span="9">
                                        <div style="background-color: rgba(199, 226, 185, 0.28);width: 100%; padding: 50px 20px ;margin: auto 0">
                                            <span style="color: rgba(41,45,39,0.67)">{{collegeBasic.introduceText}}</span>
                                            <a :href="college.dataUrl" target="_blank"><i class="el-icon-arrow-right"></i> 查看</a>
                                        </div>

                                    </el-col>
                                </el-row>
                            </div>
                            <div style="margin: 40px 0"><el-divider ></el-divider></div>
                            <div class="basic">
                                <span>建校时间: {{college.foundYear}}</span><span>隶属于: {{college.attach}}</span><span>学校面积: {{college.area}}亩</span><br/><br/>
                                <span>{{college.address}}</span><br/><br/>
                            </div>
                            <div style="margin: 40px 0"><el-divider ></el-divider></div>
                            <div class="scale" v-if="collegeBasic.boyScale !=null">
                                <el-row>
                                    <el-col :span="8">
                                        <span>男生比例</span>
                                        <el-progress type="circle" color="#a2c8ec" :percentage="Number(collegeBasic.boyScale.split('%')[0])" width="100"></el-progress>
                                    </el-col>
                                    <el-col :span="8">
                                        <span>女生比例</span>
                                        <el-progress type="circle" color="#cfecc1" :percentage="Number(collegeBasic.girlScale.split('%')[0])" width="100"></el-progress>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="scale" v-if="collegeBasic.workScale !=null && collegeBasic.furtherScale !=null && collegeBasic.abroadScale !=null">
                                <el-row>
                                    <el-col :span="8" v-if="collegeBasic.workScale !=='--'">
                                        <span>就业比例</span>
                                        <el-progress type="circle" color="#b29dec" :percentage="Number(collegeBasic.workScale.split('%')[0])" width="100"></el-progress>
                                    </el-col>
                                    <el-col :span="8" v-if="collegeBasic.furtherScale !=='--'" >
                                        <span>考研比例</span>
                                        <el-progress type="circle" color="#f19e9e" :percentage="Number(collegeBasic.furtherScale.split('%')[0])" width="100"></el-progress>
                                    </el-col>
                                    <el-col :span="8" v-if="collegeBasic.abroadScale !=='--'">
                                        <span>出国比例</span>
<!--                                        <el-progress type="circle" color="#b3f3f3" :percentage="Number.parseFloat(collegeBasic.abroadScale.split('%'))" width="100"></el-progress>-->
                                        <el-progress type="circle" color="#b3f3f3" :percentage="Number(collegeBasic.abroadScale.split('%')[0])" width="100"></el-progress>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="index" v-show="collegeBasic.studyIndex !=null">
                                <el-row>
                                    <el-col :span="6">
                                        <span> <el-rate
                                                v-model="collegeBasic.studyIndex"
                                                disabled
                                                show-score
                                                text-color="#ff9900"
                                                :score-template="collegeBasic.studyIndex">
                                        </el-rate> 学习指数 </span>
                                    </el-col>
                                    <el-col :span="6">
                                        <span> <el-rate
                                                v-model="collegeBasic.liveIndex"
                                                disabled
                                                show-score
                                                text-color="#ff9900"
                                                :score-template="collegeBasic.liveIndex">
                                        </el-rate> 生活指数</span>
                                    </el-col>
                                    <el-col :span="6">
                                        <span> <el-rate
                                                v-model="collegeBasic.workIndex"
                                                disabled
                                                show-score
                                                text-color="#ff9900"
                                                :score-template="collegeBasic.workIndex">
                                        </el-rate> 工作指数</span>
                                    </el-col>
                                    <el-col :span="6">
                                        <span> <el-rate
                                                v-model="collegeBasic.complexIndex"
                                                disabled
                                                show-score
                                                text-color="#ff9900"
                                                :score-template="collegeBasic.complexIndex">
                                        </el-rate> 综合评分</span>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>


                    </div>
                </div>

                <div class="collegeAdmitCount">
                    <el-divider content-position="left"><i class="el-icon-pie-chart"></i> 学校在各省录取的统计和查询</el-divider>
                    <div style="margin: 40px 120px">
                        <span>省份 ></span>
                        <span>
                            <el-select v-model="provinceAdmit" placeholder="省份" >
                                <el-option v-for="province in provinces" :value=province>{{province}}</el-option>
                            </el-select>
                        </span>
                        <span>
                            <el-button @click="searchProvinceAdmit(1)" >查 询 </el-button>
                        </span>
                    </div>

                    <!-- echarts -->
                    <div class="line" v-show="collegeAdmitScienceLine.xAxis.data.length>2 || collegeAdmitLiberalLine.xAxis.data.length>2">
                        <div style="margin-bottom: 50px">
                            <el-divider content-position="right"><i class="el-icon-data-line"></i> 本科批次的文理统计折线图</el-divider>
                        </div>
                        <el-row>
                            <el-col :span="12" v-show="collegeAdmitLiberalLine.xAxis.data.length>2">
                                <span>文科</span>
                                <echart :options="collegeAdmitLiberalLine"/>
                            </el-col>
                            <el-col :span="12" v-show="collegeAdmitScienceLine.xAxis.data.length>2">
                                <span>理科</span>
                                <echart :options="collegeAdmitScienceLine"/>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="provinceAdmitList" v-show="provinceAdmitList.length != 0">
                        <el-divider content-position="right" ><i class="el-icon-finished"></i> 查询结果列表</el-divider>
                        <div class="List" >
                            <el-table :data="provinceAdmitList" stripe style="width: 100%;margin: 50px">
                                <el-table-column type="index" label="序号" width="100"></el-table-column>
                                <el-table-column prop="province" label="录取省份" width="150"></el-table-column>
                                <el-table-column prop="year" label="录取年份" width="150"></el-table-column>
                                <el-table-column prop="examType" label="录取类型" width="100"></el-table-column>
                                <el-table-column prop="highestScore" label="最高分" width="150"></el-table-column>
                                <el-table-column prop="averageScore" label="平均分" width="150"></el-table-column>
                                <el-table-column prop="lowestScore" label="最低分" width="150"></el-table-column>
                                <el-table-column prop="lowestRank" label="最低排位" width="150"></el-table-column>
                                <el-table-column prop="admitBatch" label="录取批次" width="100"></el-table-column>
                            </el-table>
                            <!--分页-->
                            <el-pagination layout="prev, pager, next"
                                           style="margin: 10px auto;text-align: center"
                                           :current-page="provinceAdmitCurrentPage"
                                           :page-size="provinceAdmitPageSize"
                                           :total="provinceAdmitTotal"
                                           @current-change="searchProvinceAdmit">
                            </el-pagination>
                        </div>
                    </div>

                </div>

                <div class="collegeMajorAdmitCount">
                    <el-divider content-position="left"><i class="el-icon-data-analysis"></i> 学校的各专业在各省的录取分数查询</el-divider>
                    <div style="margin: 40px 120px">
                        <span>省份 ></span>
                        <span>
                            <el-select v-model="provinceMajorAdmit" placeholder="省份" >
                                <el-option v-for="province in provinces" :value=province>{{province}}</el-option>
                            </el-select>
                        </span>
                        <span>
                            <el-button @click="searchProvinceMajorAdmit(1)" >查 询 </el-button>
                        </span>
                    </div>
                    <div class="provinceMajorAdmitList" v-show="provinceMajorAdmitList.length != 0">
                        <el-divider content-position="right" ><i class="el-icon-finished"></i> 查询结果列表</el-divider>
                        <div class="List" >
                            <el-table :data="provinceMajorAdmitList" stripe style="width: 100%;margin: 50px">
                                <el-table-column type="index" label="序号" width="50"></el-table-column>
                                <el-table-column prop="majorName" label="专业名称" width="300"></el-table-column>
                                <el-table-column prop="province" label="录取省份" width="150"></el-table-column>
                                <el-table-column prop="year" label="录取年份" width="100"></el-table-column>
                                <el-table-column prop="examType" label="录取类型" width="100"></el-table-column>
                                <el-table-column prop="highestScore" label="最高分" width="110"></el-table-column>
                                <el-table-column prop="averageScore" label="平均分" width="120"></el-table-column>
                                <el-table-column prop="lowestScore" label="最低分" width="100"></el-table-column>
                                <el-table-column prop="lowestRank" label="最低排位" width="100"></el-table-column>
                                <el-table-column prop="admitBatch" label="录取批次" width="100"></el-table-column>
                            </el-table>
                            <!--分页-->
                            <el-pagination layout="prev, pager, next"
                                           style="margin: 10px auto;text-align: center"
                                           :current-page="provinceMajorAdmitCurrentPage"
                                           :page-size="provinceAdmitMajorPageSize"
                                           :total="provinceMajorAdmitTotal"
                                           @current-change="searchProvinceMajorAdmit">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <el-divider content-position="center" >&copy; 2020 </el-divider>

        </div>
    </div>
</template>

<script>
    import CollegeDetailsHeader from "../components/CollegeDetailsHeader";
    import college_basic from "../api/college_basic";
    import college_admit from "../api/college_admit";
    import college_major_admit from "../api/college_major_admit";
    import option from "../echarts/option";
    import ECharts from "vue-echarts";
    import set_data from "../echarts/set_data";
    export default {
        name: "CollegeDetails",
        components:{CollegeDetailsHeader,'echart': ECharts},
        created() {
            // console.log(this.$store.getters.GET_COLLEGE)
            this.college = this.$store.getters.GET_COLLEGE
            this.getCollegeBasic()
        },
        data(){
            return{
                college:null,
                collegeBasic:null,
                pictrues:[],
                provinces:["全部","北京","天津","河北","河南","山东","山西","陕西","内蒙古","辽宁","吉林","黑龙江","上海","江苏","安徽","江西","湖北","湖南",
                    "重庆","四川","贵州","云南", "广东","广西","福建","甘肃","宁夏","新疆","西藏","海南","浙江","青海"],
                provinceAdmit:null,
                provinceAdmitList:[],
                provinceMajorAdmit:null,
                provinceMajorAdmitList:[],
                //分页数据
                provinceAdmitCurrentPage: 1,
                provinceAdmitTotal: 0,
                provinceAdmitPageSize: 10,
                provinceMajorAdmitCurrentPage: 1,
                provinceMajorAdmitTotal: 0,
                provinceAdmitMajorPageSize: 10,

                //echarts
                collegeAdmitScienceLine: option.collegeAdmitScienceLine,
                collegeAdmitLiberalLine: option.collegeAdmitLiberalLine
            }
        },
        methods:{
            getCollegeBasic(){
                let vm = this
                college_basic.getCollegeBasicByCollegeName(vm.college.collegeName).then(function (response) {
                    console.log(response)
                    if (response.data.code === 200){
                        console.log(response.data.data)
                        var data = response.data.data
                        vm.collegeBasic = data.collegeBasic
                        vm.pictrues = data.pictrues
                        // vm.$notify.success({title: '学校已成功查询', message: '请查看查询结果列表', duration: 2500});

                    }else{
                        if (response.data.code === 201){
                            vm.$notify.info({title: '学校简介信息为空！', message: '学校', duration: 2500});
                        }

                    }
                })
            },
            searchProvinceAdmit(currentPage){
                //验证
                if(this.provinceAdmit ===null){
                    //验证表单数据
                    this.$notify.warning({title: '信息输入不完整', message: '请输入完整的信息，再点击查询按钮', duration: 2500});
                }else{
                    //请求
                    console.log(this.provinceAdmit)
                    let vm = this
                    //echarts
                    set_data.countCollegeAdmit(vm.college.collegeName,vm.provinceAdmit)
                    college_admit.getCollegeAdmitByCollegeName(vm.college.collegeName,vm.provinceAdmit,currentPage).then(function (response) {
                        // console.log(response)
                        if (response.data.code === 200){
                            console.log(response.data.data)
                            var data = response.data.data
                            vm.provinceAdmitList = data.records
                            vm.provinceAdmitCurrentPage = data.current
                            vm.provinceAdmitTotal = data.total
                            vm.provinceAdmitPageSize = data.size
                            vm.$notify.success({title: '已成功查询', message: '请查看查询结果列表', duration: 2500});

                        }else{
                            if (response.data.code === 201){
                                vm.provinceAdmitList = []
                                vm.$notify.info({title: '查询结果为空！', message: '请重查询', duration: 2500});
                            }

                        }
                    })

                }
            },
            searchProvinceMajorAdmit(currentPage){
                //验证
                if(this.provinceMajorAdmit ===null){
                    //验证表单数据
                    this.$notify.warning({title: '信息输入不完整', message: '请输入完整的信息，再点击查询按钮', duration: 2500});
                }else{
                    //请求
                    console.log(this.provinceMajorAdmit)
                    let vm = this
                    college_major_admit.getCollegeMajorAdmitByCollegeName(vm.college.collegeName,vm.provinceMajorAdmit,currentPage).then(function (response) {
                        // console.log(response)
                        if (response.data.code === 200){
                            console.log(response.data.data)
                            var data = response.data.data
                            vm.provinceMajorAdmitList = data.records
                            vm.provinceMajorAdmitCurrentPage = data.current
                            vm.provinceMajorAdmitTotal = data.total
                            vm.provinceAdmitMajorPageSize = data.size
                            vm.$notify.success({title: '已成功查询', message: '请查看查询结果列表', duration: 2500});

                        }else{
                            if (response.data.code === 201){
                                vm.provinceMajorAdmitList = []
                                vm.$notify.info({title: '查询结果为空！', message: '请重查询', duration: 2500});
                            }
                        }
                    })
                }


            }

        }

    }
</script>

<style scoped>
    .el-divider__text{
        color: #5dabf7;
    }
    .college{

        border: rgb(241, 252, 252) solid 2px;
        margin: 50px 100px;
    }
    .collegeDetails,.collegeAdmitCount,.collegeMajorAdmitCount{
        /*height: 50px;*/
        margin: 80px;
    }
    .collegeInfo{
        /*border: #5dabf7 solid 1px;*/
        /*height: 200px;*/
        margin: 50px;
    }
    .collegeBasic{
        margin: 40px;
    }
    span{
        font-family: 华文楷体;
        font-size: 20px;
        color: #555b5c;
        margin: 30px;
    }
    a{
        font-family: 华文楷体;
        font-size: 20px;
        color: #1d88d9;
        margin: 30px;
    }
    .index{
        margin: 20px 67px;
    }
    .scale{
        margin: 50px;
    }
    .el-button{
        font-family: 华文楷体;
        font-size: 20px;
        color: #555b5c;
        float: right;
        margin: 0 20px;

        border: #5dabf7 solid 1px;
    }
    .el-button:hover{
        color: #5dabf7;
    }
</style>